<template>
  <div>
    <q-form class="dialog_card column" ref="editRef">
      <div class="table_table">
        <yq-table
          v-model:table="tableOptions"
          v-model:initial="initialPagination"
          @onRequest="onRequest"
          :topLeft="false"
          :topAdd="false"
        >
          <template v-slot:yq_table_body="props">
            <q-tr :props="props.props">
              <q-td key="id" :props="props.props">
                <span>{{ props.props.row.id }}</span>
              </q-td>

              <q-td key="bbs_id" :props="props.props">
                <span>{{ props.props.row.bbs_id }}</span>
              </q-td>

              <q-td key="created_at" :props="props.props">
                <span>{{ props.props.row.created_at }}</span>
              </q-td>

              <q-td key="member" :props="props.props">
                <span>{{
                  props.props.row.member.member_id
                    ? props.props.row.member.nickname
                    : ''
                }}</span>
              </q-td>

              <q-td key="operation" :props="props.props">
                <q-btn
                  flat
                  round
                  dense
                  class="q-mx-xs"
                  color="negative"
                  icon="delete"
                  v-permission="'/bbs/List/like:delete'"
                >
                  <q-menu
                    transition-show="jump-up"
                    transition-hide="jump-down"
                    content-class="text-center"
                    self="bottom left"
                    anchor="top left"
                    :offset="[60, 5]"
                  >
                    <div class="q-px-sm q-pt-md">
                      <q-icon name="info" color="warning" class="q-mr-sm" />
                      是否要删除此行?
                    </div>
                    <div class="q-gutter-x-sm q-pt-sm q-pb-md">
                      <q-btn
                        color="grey-6"
                        unelevated
                        class="no-border-radius text-body2"
                        padding="2px sm"
                        dense
                        label="取消"
                        v-close-popup
                      ></q-btn>
                      <q-btn
                        color="primary"
                        unelevated
                        class="no-border-radius text-body2"
                        padding="2px sm"
                        dense
                        label="确认"
                        @click="deleteData(props.props.row.id, props.props.row)"
                        v-close-popup
                      ></q-btn>
                    </div>
                  </q-menu>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </yq-table>
      </div>
    </q-form>
  </div>
</template>

<script lang="ts" setup>
import emitter from '@/components/eventbus';
import { likeList, likeDelete } from '@/api/bbs';
import { Ref } from 'vue';
import { useQuasar } from 'quasar';
import { likeData, pageInit } from '../mocklist';
import { cloneDeep } from 'lodash-es';

interface Props {
  bbs_id?: number;
}

const tableOptions = reactive({
  tableLoading: false,
  ...likeData,
});
const initialPagination = ref(cloneDeep(pageInit));

const props = withDefaults(defineProps<Props>(), {});
const editRef = ref();
const $q = useQuasar();

const onRequest = (props: any) => {
  const { page, rowsPerPage, rowsNumber } = props.pagination;
  initialPagination.value.page = page;
  initialPagination.value.rowsPerPage = rowsPerPage;
  initialPagination.value.per_page = rowsPerPage;
  initialPagination.value.rowsNumber = rowsNumber;
  getList();
};

//删除
const deleteData = async (index: number, item: any) => {
  const res: any = await likeDelete({ id: item.id });
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    getList();
  }
};

//接收兄弟组件传递事件
emitter.on('saveData', async () => {
  // IsValidate();
});
//信息返回
const info = (res: any) => {
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    emit('backList');
  }
};

const emit = defineEmits(['update:form', 'backList']);

//获取列表
const getList = async () => {
  tableOptions.tableLoading = true;
  const body = cloneDeep(
    Object.assign(initialPagination.value, { bbs_id: props.bbs_id })
  );
  const res: any = await likeList(body);
  tableOptions.tableLoading = false;
  tableOptions.columnDatas = res.data.data;
  initialPagination.value.rowsNumber = res.data.total;
  console.log('规格值管理', res);
};

getList();
</script>
<style lang="scss" scoped></style>
